<template>
        <el-table :data="pagedData" style="width: 100%" >
            <el-table-column prop="useType" label="使用性质" width="150"/>
            <el-table-column prop="firstRegDate" label="初次登记日期" width="150"/>
            <el-table-column prop="plateNo" label="车牌号" width="100"/>
            <el-table-column prop="brandZh" label="车辆品牌" width="200"/>
            <el-table-column prop="vehicleModel" label="车辆型号" width="100"/>
        </el-table>
        <div class="pagination">
            <el-pagination
                v-if="vehicleParking.length > pageSize"
                style="margin-top: 16px; text-align: right;"
                background
                layout="prev, pager, next, jumper, total"
                :total="vehicleParking.length"
                :page-size="props.pageSize"
                v-model:current-page="currentPage"
            />
        </div>
</template>

<script setup>
import axios from 'axios';
import { ref, watch, computed } from 'vue';

const props = defineProps({
    idNumber: String,
    pageSize: {
        type: Number,
        default: 10,
    }
});

const vehicleParking = ref([]);

watch(() => props.idNumber, (newId) => {
    vehicleParking.value.length = 0;
    axios.post("/api/carInformation/findByIdNumber", {
        idNumber: newId
    })
    .then(response => {
        const res = response.data.data || [];
        res.forEach(element => {
            vehicleParking.value.push(element);
            console.log(element)
        });
    })
    .catch(error => {
        console.error("Error fetching vehicle information:", error);
    });
}, { immediate: true });

const currentPage = ref(1);

const pagedData = computed(() => {
    const start = (currentPage.value - 1) * props.pageSize;
    return vehicleParking.value.slice(start, start + props.pageSize);
});
</script>